這個章節運行測試的方式稍微不同，由於 babylon.js 套件較為龐大，如果在 dev 模式下運行第一次開啟頁面會等很久，導致測試一直超時。

所以這裡我們改成已產品環境的網頁內容進行測試，首先執行建構。

npm run docs:build

結束後會在終端機看到以下資訊。

✓ building client + server bundles...
✓ rendering pages...
build complete in 22.67s.

接著運行 preview。

npm run docs:preview

出現以下內容表示已啟動。

  vitepress v1.3.1

Built site served at http://localhost:4173/

現在讓我們新增測試檔案，特別注意 port 是 4173，不是 5173 喔。◝( •ω• )◟

e2e\components\util-party-popper.spec.ts

import { test, expect } from '@playwright/test';

test.beforeEach(async ({ page }) => {
  await page.goto('http://localhost:4173/components/util-party-popper/');
});

test('頁面必須存在（title 不可出現 404）', async ({ page }) => {
  const title = await page.title();
  expect(title).not.toContain('404');
});

先將元件加上 title，方便定位。

docs\components\util-party-popper\index.md

...

<basic-usage title="basic-usage" />

...

<emit-params title="emit-params"/>

...

<wide-area-emit title="wide-area-emit"/>

...

執行腳本開始運行 e2e 測試。

npm run test:e2e-ui

測試：基本用法

讓我們新增測試。

e2e\components\util-party-popper.spec.ts

...

test.describe('基本用法', () => {
  test('必須有文字為「基本用法」的 h3', async ({ page }) => {
    const h3Els = page.locator('h3');
    const target = h3Els.getByText('基本用法');
    await expect(target).toBeVisible();
  });

  test('必須包含一個 canvas', async ({ page }) => {
    const section = page.getByTitle('basic-usage');
    await expect(section).toBeVisible();

    const canvas = section.locator('canvas');
    await expect(canvas).toBeVisible();
  });
})

成功。(。・∀・)ノ

測試：發射參數

與基本用法內容相同，只是多了兩個 input。

e2e\components\util-party-popper.spec.ts

...

test.describe('發射參數', () => {
  test('必須有文字為「發射參數」的 h3', async ({ page }) => {
    const h3Els = page.locator('h3');
    const target = h3Els.getByText('發射參數');
    await expect(target).toBeVisible();
  });

  test('必須包含一個 canvas', async ({ page }) => {
    const section = page.getByTitle('emit-params');
    await expect(section).toBeVisible();

    const canvas = section.locator('canvas');
    await expect(canvas).toBeVisible();
  });

  test('必須包含兩個 range input', async ({ page }) => {
    const section = page.getByTitle('emit-params');
    await expect(section).toBeVisible();

    const rangeInputs = section.locator('input[type="range"]');
    await expect(rangeInputs).toHaveCount(2);
  });
})

成功。( •̀ ω •́ )✧

測試：廣域發射

必須提供 4 個按鈕。

e2e\components\util-party-popper.spec.ts

...

test.describe('廣域發射', () => {
  test('必須有文字為「廣域發射」的 h3', async ({ page }) => {
    const h3Els = page.locator('h3');
    const target = h3Els.getByText('廣域發射');
    await expect(target).toBeVisible();
  });

  test('必須包含一個 canvas', async ({ page }) => {
    const section = page.getByTitle('wide-area-emit');
    await expect(section).toBeVisible();

    const canvas = section.locator('canvas');
    await expect(canvas).toBeVisible();
  });

  test('必須包含 4 個按鈕', async ({ page }) => {
    const section = page.getByTitle('wide-area-emit');
    await expect(section).toBeVisible();

    const btnList = section.locator('.cursor-pointer');
    await expect(btnList).toHaveCount(4);
  });
})

成功。ˋ( ° ▽、° )

以上我們完成基本 e2e 測試了，可以注意到由於內容都在 canvas 內，所以能測試的內容也很有限。

大家可以想想還有甚麼更細緻的案例，敬請自由發揮！( ´ ▽ ` )ﾉ

總結

• 完成「拉炮」介紹頁面 e2e 測試

以上程式碼已同步至 GitLab，大家可以前往下載：

GitLab - D17